<!-- 其他技术分析领域 -->
<template>
  <div class="otherAnalysis-page" style="font-size: initial" @click="closeShowTips">
    <!-- 顶部搜索区域 -->
    <div class="other-search-box">
      <div class="osb-tit">
        <p class="p-1">{{ mainTitle }}</p>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <p class="p-2" v-if="routerName == 'technologyTopicTrends'">
          基于技术主题计算和领域趋势脉络生成法，评估分析技术领域中的前沿热点主题及趋势变化
        </p>
        <p class="p-2" v-if="routerName == 'technologyFrontier'">
          发掘该领域热点技术之间的内在联系，展示出该领域不同子技术之间的交叉研究趋势
        </p>
        <p class="p-2" v-if="routerName == 'technologyMaturity'">
          研判技术所处阶段，分析技术研发与产业应用的成熟指数，形成新兴前沿技术成熟度曲线，实现技术成熟度分析
        </p>
        <p class="p-2" v-if="routerName == 'patentRoadmap'">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;梳理技术发展趋势过程，挖掘各阶段高价值专利，发现技术实现路径&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </p>
      </div>
      <div class="osb-input flex" v-if="routerName == 'patentRoadmap'">
        <el-input class="" v-model="searchv" placeholder="请输入技术关键词">
        </el-input>
        <el-input
          class="searchc"
          v-model="searchc"
          placeholder="请输入企业名称"
        >
        </el-input>
        <el-button type="primary" round class="s-btn" @click="getData">搜索</el-button>
      </div>
      <div class="osb-input" v-else-if="routerName == 'technologyMaturity'">
        <!-- <el-input class="inp" placeholder="请输入技术关键词" v-model="searchv"> </el-input> -->
        <el-autocomplete
          class="inp"
          v-model="searchv"
          :fetch-suggestions="querySearchAsync"
          @select="handleSelect"
          placeholder="请输入技术关键词"
        ></el-autocomplete>
        <p class="search-box" @click="getData">搜索</p>
      </div>
      <div class="osb-textarea" @click.stop.prevent="handleFocus" v-else>
        <el-input
          v-model="searchv"
          type="text"
          clearable
          placeholder="请输入关键词"
          class="search-bar"
        />
        <!-- <el-input
          type="textarea"
          :autosize="autosize"
          placeholder="请输入技术关键词"
          clearable
          :rows="autosize ? 5 : 1"
          @focus="focusBlur(true)"
          @blur="focusBlur(false)"
          v-model="searchv"
        >
        </el-input> -->
        <!-- <p @click="getData">搜索</p> -->
        <el-button class="search-btn" type="primary" @click.stop.prevent="handleSearch">搜索</el-button>
        <!-- 点击后弹出textarea -->
        <div v-if="showTextareaBox" class="textarea-box">
          <el-input
            v-model="searchv"
            type="textarea"
            clearable
            :autosize="{ maxRows: 4 }"
            placeholder="请输入技术关键词"
          >
          </el-input>
          <div v-if="showSearchTips" class="search-tips-box">
            <!-- 智能检索-检索提示 -->
            <SmartSearchTips
              :searchTxt="searchv"
              @chooseTips="chooseTips"
              @moreHistory="openMoreHistory"
            />
          </div>
        </div>
      </div>
      <div class="hot-words">
        <p class="tit">热门技术:</p>
        <ul class="hot-ul">
          <li
            v-for="item in hotTech"
            :key="item.type"
            @click="handleClickHotWords(item.dictValue)"
          >
            {{ item.dictValue }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 图表展会区域 -->
    <div class="charts-wrap">
      <div class="left-wrap" :class="{'mr': routerName == 'technologyFrontier' || routerName == 'technologyTopicTrends'}" v-loading="resultLoading">
        <!-- <div class="top-wrap">
          <div style="width: 70%">
            <span class="m-tits">检索条件:</span>
            <span class="m-value">{{ searchv }}</span>
            <span
              class="m-value"
              v-show="
                searchv != '' && searchc != '' && routerName == 'patentRoadmap'
              "
            >
              and
            </span>
            <span
              class="m-value"
              v-show="searchc != '' && routerName == 'patentRoadmap'"
              >{{ searchc }}</span
            >
          </div>
          <div class="search-time">
            <el-button
              v-if="routerName == 'technologyMaturity'"
              type="primary"
              size="small"
              plain
              @click="expertsScope"
              >专家干预</el-button
            >
            <el-button
              v-if="routerName !== 'patentRoadmap'"
              type="primary"
              size="small"
              plain
              @click="exportData"
              ><i class="el-icon-download"></i>导出数据</el-button
            >
            <el-button type="primary" size="small" @click="downloadImg"
              ><i class="el-icon-download"></i>保存图片</el-button
            >
          </div>
        </div> -->
        <!-- 条件选择区域 -->
        <div class="condition">
          <div>
            <div class="date-box" v-if="routerName !== 'technologyMaturity'">
              <span class="tit">时间范围:</span>
              <div class="search-time">
                <el-date-picker
                  v-model="startT"
                  size="medium"
                  type="year"
                  placeholder="开始年"
                  :clearable="false"
                  :picker-options="pickerStart"
                  class="elpicker"
                  @change="changeStart"
                >
                </el-date-picker>
                <span class="split"> 至 </span>
                <el-date-picker
                  v-model="endT"
                  size="medium"
                  type="year"
                  placeholder="结束年"
                  :clearable="false"
                  :picker-options="pickerEnd"
                  class="elpicker"
                  @change="changeEnd"
                >
                </el-date-picker>
              </div>
              <div
                class="search-time"
                v-if="routerName == 'technologyFrontier'"
              >
                <span class="tit">主题词:</span>
                <el-select v-model="size" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="search-time" v-if="routerName == 'patentRoadmap'">
                <span class="tit">专利条数:</span>
                <el-select v-model="patentSize" placeholder="请选择">
                  <el-option
                    v-for="item in patentOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="search-time">
            <el-button
              v-if="routerName == 'technologyMaturity'"
              type="primary"
              size="small"
              plain
              @click="expertsScope"
              >专家干预</el-button
            >
            <el-button
              v-if="routerName !== 'patentRoadmap'"
              type="primary"
              size="small"
              plain
              class="export-btn"
              @click="exportData"
              ><i class="el-icon-download"></i>导出数据</el-button
            >
            <el-button type="primary" size="small" class="save-btn" @click="downloadImg"
              ><i class="el-icon-download"></i>保存图片</el-button
            >
          </div>
        </div>

        <p style="height: 10px"></p>
        <!-- 技术前沿领域 -->
        <TechnologyFrontier
          v-if="
            routerName == 'technologyFrontier' &&
              termsChartData &&
              termsChartData.length > 0
          "
          :chartData="chartData"
          :size="size"
          :termsChartData="termsChartData"
          :checkList="checkList"
          @chartDom="chartDom"
          id="idFrontier"
        ></TechnologyFrontier>
        <!-- <div
          v-if="routerName == 'technologyFrontier' && loading"
          class="chart-loading-box"
        >
          <loading1 :emptyText="emptyText" />
        </div> -->

        <!-- 技术成熟度 -->
        <TechnologyMaturity
          v-if="
            routerName == 'technologyMaturity' &&
              chartData &&
              chartData.length > 0
          "
          :chartData="chartData"
          @chartDom="chartDom"
          id="idMaturity"
          ref="refMaturity"
        ></TechnologyMaturity>
        <!-- 技术趋势分析 -->
        <TechnologyTopicTrends
          v-if="
            routerName == 'technologyTopicTrends' &&
              chartData &&
              chartData.length > 0
          "
          :chartData="chartData"
          :checkList="checkList"
          :defaultSelect="checkList.length"
          :termsChartData="termsChartData"
          ref="resTechnologyTopicTrends"
          id="technologyTopicTrends"
        ></TechnologyTopicTrends>
        <!-- 技术路线图 -->
        <PatentRoadmap
          v-if="routerName == 'patentRoadmap'"
          :patentData="patentData"
          :patentLoading="patentLoading"
          :patentSize="patentSize"
        />
      </div>
      <!-- 右侧展示筛选项 -->
      <div class="right-wrap" v-if="this.routerName == 'technologyFrontier' || routerName == 'technologyTopicTrends'">
        <div class="rw">
          <span class="r-tit">技术领域</span>
          <p class="r-tools">
            <span class="r-btn" @click="handleReset">重置</span>
            <span class="r-btn" @click="handleSave">保存</span>
            <span class="r-btn" @click="handleMerge">合并</span>
          </p>
        </div>
        <!-- <el-checkbox-group v-model="checkList">
          <div
            class="checkListItem"
            v-for="(it, index) in rightTerms"
            :key="index"
          >
            <div class="flex ci-con">
              <el-checkbox :label="it.name"></el-checkbox>
            </div>
          </div>
        </el-checkbox-group> -->
        <el-table
          ref="rightTable"
          :show-header="false"
          :data="rightTerms"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="key" label="">
            <template slot-scope="scope">
              <span v-if="!inputRefs[scope.$index]">{{ scope.row.key }}</span>
              <span v-else>
                <el-input
                  v-model="scope.row.key"
                  placeholder=""
                  size="mini"
                  style="width: 100px"
                ></el-input>
              </span>
              <span class="tools-box">
                <!-- 修改 -->
                <i
                  v-if="!inputRefs[scope.$index]"
                  class="tools-btn el-icon-edit"
                  @click="handleShowInp(scope.$index)"
                ></i>
                <!-- 保存 -->
                <i
                  v-if="inputRefs[scope.$index]"
                  class="tools-btn el-icon-check"
                  @click="handleUpdateIte(scope.$index)"
                ></i>
                <!-- 取消 -->
                <i
                  v-if="inputRefs[scope.$index]"
                  class="tools-btn el-icon-close"
                  @click="handleShowInp(scope.$index)"
                ></i>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="check" label="" width="40">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.check"></el-checkbox
            ></template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 专家干预弹窗 -->
    <el-dialog
      title="专家干预"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="700px"
    >
      <div class="login-box2 ">
        <el-form
          class="login-form"
          ref="form"
          :model="form"
          label-width="200px"
        >
          <el-form-item label="选择今年属于哪个阶段" prop="name">
            <el-select
              v-model="form.name"
              placeholder="请选择"
              class="elselect"
              style="width: 300px"
            >
              <el-option label="概念期" value="1">
                <span>概念期</span>
              </el-option>
              <el-option label="原型期" value="2">
                <span>原型期</span>
              </el-option>
              <el-option label="应用期" value="3">
                <span>应用期</span>
              </el-option>
              <el-option label="成熟期" value="4">
                <span>成熟期</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="notes">
            <el-input
              type="textarea"
              style="width: 300px"
              v-model="form.notes"
              placeholder="请输入备注"
              class="elselect"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer dialokgClass">
        <el-button type="primary" @click.stop="confirmExport">确认</el-button>
      </span>
    </el-dialog>
    <!-- 历史记录 -->
    <SmartHistory ref="smartHistory" @chooseTips="chooseTips" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";
import base64 from "@/utils/base64.js";
import { refactor, getYear, downloadChartImg } from "@/utils/utils";
import TechnologyFrontier from "./technologyFrontier";
import TechnologyMaturity from "./technologyMaturity";
import TechnologyTopicTrends from "./technologyTopicTrends";
import PatentRoadmap from "./patentRoadmap";
import SmartSearchTips from "@/views/modules/DataCenter/components/way/SmartSearchTips"
import SmartHistory from "@/views/modules/DataCenter/components/way/smartHistory"
import { Loading } from "element-ui";
import * as htmlToImage from "html-to-image";
import { toPng, toJpeg, toBlob, toSvg } from "html-to-image";
import { nextTick } from 'vue';
import mixin from "@/mixins/panoramaExpert";

export default {
  mixins: [mixin],
  components: {
    TechnologyFrontier,
    TechnologyMaturity,
    TechnologyTopicTrends,
    PatentRoadmap,
    SmartSearchTips,
    SmartHistory
  },
  data() {
    return {
      resultLoading: false,
      // loading: true,
      emptyText: "数据加载中...",
      showTextareaBox: false, // 检索textarea框是否展示
      showSearchTips: false, // 检索历史记录是否展示
      searchv: "",
      _searchv: "", // 记录初始检索词
      searchc: "",
      startT: "2013",
      endT: "2023",
      pickerStart: {
        disabledDate: (time) => {
          return this.disabledDate(time, this.endT, "gt");
        },
      },
      pickerEnd: {
        disabledDate: (time) => {
          return this.disabledDate(time, this.startT, "lt");
        },
      },
      patentSize: 3,
      patentOptions: [
        {
          value: 1,
          label: "1条",
        },
        {
          value: 3,
          label: "3条",
        },
        {
          value: 5,
          label: "5条",
        },
        {
          value: 10,
          label: "10条",
        },
      ],
      size: 10,
      options: [
        {
          value: 10,
          label: "前10",
        },
        {
          value: 20,
          label: "前20",
        },
        {
          value: 30,
          label: "前30",
        },
        {
          value: 40,
          label: "前40",
        },
        {
          value: 50,
          label: "前50",
        },
      ],
      value: "",
      checkList: [],
      //图表数据
      chartData: [],
      patentData: {},
      patentLoading: false,
      termsChartData: [],
      _termsChartData: [],
      rightTerms: [],
      // _rightTermsKeys: [], // 记录rightTerms的key值，用于编辑和保存
      inputRefs: [], // 记录rightTerms修改展示的input的值
      mergeMap: {}, // 记录合并的map
      routerName: "technologyMaturity",
      mainTitle: "技术前沿领域交叉分析",
      apiName: "",
      aggs: [],
      dialogVisible: false,
      form: {
        name: "",
        notes: "",
      },
      hotTech: [],
      allInfos: [
        { value: "abcddtrr", name: "看自身情况" },
        { value: "abc", name: "看自身情况" },
        { value: "dtrr", name: "看自身情况" },
        { value: "ddtrrdf", name: "看自身情况" },
        { value: "ccdvvffrf", name: "看自身情况" },
        { value: "adsadsdsd", name: "看自身情况" },
        { value: "vfrtssg", name: "看自身情况" },
      ],
      autosize: false,
    };
  },
  watch: {
    $route(val) {
      this.routerName = val.name;
      this.searchv = this.hotTech[0].dictValue || "";
      this._searchv = this.copyObject(this.searchv)
      this.getData();
    },
    checkList(val) {
      // this.getTermsData(val);
    },
    patentSize(val) {
      this.getData();
    },
  },
  created() {
    const query = this.$route.query;
    const token = query.token;
    // 存token
    if (token) {
      this.$cookie.set("token", token);
    }
    this.getDictAll();
    if (query.sq) {
      this.searchv = query.sq;
    } else {
      this.searchv = this.hotTech[0].dictValue || "";
      this._searchv = this.copyObject(this.searchv)
    }
  },
  mounted() {
    this.routerName = this.$route.name;
    this.getData();
  },
  methods: {
    // 获取热门技术字典数据
    getDictAll() {
      const data = JSON.parse(localStorage.getItem("allDict"));
      const hotTech = data.find((list) => {
        return list.dictType == "hot_technologies";
      }).dataList;
      this.hotTech = hotTech;
    },
    handleMaintitle(val) {
      let ths = this;
      switch (val) {
        case "technologyFrontier":
          ths.mainTitle = "技术前沿领域交叉分析";
          ths.apiName = ths.$Url.search.commonSearch;
          ths.aggs = [
            {
              action: "trendme.GenNewTrend",
              parameters: {
                query_type: "keywords",
                is_open: false,
              },
            },
          ];
          break;
        case "technologyTopicTrends":
          ths.mainTitle = "技术主题趋势分析";
          ths.apiName = ths.$Url.search.commonSearch;
          ths.aggs = [
            {
              action: "trendme.GenNewTrend",
              parameters: {
                query_type: "keywords",
                is_open: false,
              },
            },
          ];
          break;
        case "technologyMaturity":
          ths.mainTitle = "技术成熟度分析";
          ths.apiName = ths.$Url.search.genMaturityCurveData;
          ths.aggs = [
            {
              action: "trend_statistic.GenMaturityCurveData",
              parameters: {
                search_type: "HypeCycle",
                data_type: "all",
                start_year: Number(this.startT),
                end_year: Number(this.endT),
                seacher: ths.searchv,
              },
            },
          ];
          break;
        case "patentRoadmap":
          ths.mainTitle = "专利技术路线图";
          // ths.apiName = ths.$Url.search.patentValueByYear;
          // ths.aggs = {
          //   techName: ths.searchv,
          // };
          break;
        default:
          break;
      }
    },
    handleClickHotWords(val) {
      this.searchv = val;
      this._searchv = this.copyObject(this.searchv)
      this.getData();
    },
    // 关闭textarea
    closeShowTips() {
      // nextTick(() => {
      //   if (this.showTips == true) {
          this.showTextareaBox = false
          this.showSearchTips = false
      //   }
      // })
    },
    // 获取焦点
    handleFocus() {
      nextTick(() => {
        this.showTextareaBox = true;
        nextTick(() => {
          this.showSearchTips = true
        })
      })
    },
    // 失焦
    handleBlur() {
      // setTimeout(() => {
      //   this.showTips = false;
      // }, 250);
    },
    // 输入
    handleInput() {
      if (this.searchv === "") {
        return;
      }
      this.showTextareaBox = true;
    },
    // 选择tips
    chooseTips({ key }) {
      this.searchv = key || "";
      this.showTextareaBox = false
      this.showSearchTips = false
      // this.getData()
    },
    // 查看更多历史
    openMoreHistory() {
      this.$refs.smartHistory.init();
    },
    handleSearch() {
      // this.showTextareaBox = false
      this.showSearchTips = false
      this._searchv = this.copyObject(this.searchv)
      this.getData()
    },
    // 获取合并的map
    getMergeMapData() {
      let ths = this
      let sq_time = `year>=${ths.startT} AND year<=${ths.endT}`;
      let sq = ths.searchv + " AND " + sq_time;
      let username = JSON.parse(localStorage.getItem("homeUserInfo")).username;
      let aggs = [
        {
          action: "trendme.ListComKeyword",
          parameters: {
            keyword: this._searchv, // "钙钛矿电池" ||
            // offset: 0,
            // size: 10,
            // type: username === "qtroot" ? 2 : 1
          },
        },
      ];
      let params = {
        aggs: aggs,
        dbid: "paper",
        eSearch: sq,
        ipi: 1,
        ips: 0,
      };
      this.$post(this.$Url.search.commonSearch, params)
        .then((res) => {
          let data = res.data
          if (res.status == 200) {
            if (data.reviewWord) {
              this.searchv = data.reviewWord;
            }
            if (data.chartData && data.chartData.length > 0) {
              this.mergeMap = res.data.chartData[0]
            }
          }
        })
    },
    // 获取产业链下级节点的接口1 ， 获取结果值后，再调用接口2，将接口2
    getData() {
      this.resultLoading = true;
      this.handleMaintitle(this.routerName);
      // 技术路线逻辑
      if (this.routerName == "patentRoadmap") {
        this.patentLoading = true;
        let sc = "";
        if (this.searchv != "" && this.searchc != "") {
          sc = ` and an/${this.searchc}`;
        } else {
          if (this.searchc != "") {
            sc = ` an/${this.searchc}`;
          } else {
            sc = ``;
          }
        }
        this.$post(this.$Url.search.patentValueByYear, {
          limit: this.patentSize,
          startDate: this.startT,
          endDate: this.endT,
          techName: `${this.searchv}${sc}`,
        }).then((res) => {
          const data = res.data;
          if (data.reviewWord) {
            this.searchv = data.reviewWord;
          }
          this.patentData = data.data;
          this.patentLoading = false;
          this.resultLoading = false;
          this.analysisExport();
        }).catch((err) => {
          this.resultLoading = false;
        });
        return;
      }
      this.getMergeMapData()
      this.$get(this.$Url.search.getChainNode, {
        nodename: this.searchv, //氢燃料电池
      }).then((res) => {
        let arr = [];
        res.data &&
          res.data.map((item) => {
            arr.push({
              t: item,
            });
          });
        this.getData2(arr);
      }).catch((err) => {
        this.resultLoading = false;
      });
    },
    //将产业链节点下游数据与接口返回数据一起拼接
    getData2(data_node) {
      // this.handleMaintitle(this.routerName);
      let ths = this;
      let sq_time = `year>=${ths.startT} AND year<=${ths.endT}`;
      let sq = ths.searchv;
      if (ths.searchv !== "" && this.routerName !== "technologyMaturity") {
        sq = `${sq} AND ` + sq_time;
      }
      ths.aggs[0]["parameters"]["topic"] = this._searchv // "钙钛矿电池" || 
      let params = {
        aggs: ths.aggs,
        dbid: "paper",
        eSearch: sq,
        ipi: 1,
        ips: 0,
      };
      this.$post(ths.apiName, params)
        .then((res) => {
          const data = res.data;
          if (data.chartData.length > 0) {
            this.chartData = data.chartData;
            if (data.reviewWord && this.routerName != "technologyMaturity") {
              this.searchv = data.reviewWord;
            }
            if (!this.chartData) {
              this.resultLoading = false;
              this.$message({
                type: "warning",
                message: "暂无数据",
              });
              return;
            }
            // 判断是否为交叉分析
            if (this.routerName == "technologyFrontier") {
              let terms = [],
                rightTerms = [];
              // this.rightTerms = [];
              let _arr = this.chartData[0].data.terms.slice(0, 50);
              data_node = data_node.concat(_arr);
              data_node = data_node.slice(0, 50);
              data_node.map((it) => {
                terms.push(it.t);
                // rightTerms.push({
                // key: it.t,
                // status: true,
                // check: false,
                // freq: it.freq,
                // star: it.star < 0 ? 0 : it.star,
                // });
              });
              // console.log("this.checkList", this.checkList);
              // this.rightTerms = this.copyObject(rightTerms.slice(0, this.size));
              // this.$nextTick(function() {
              //   // 设置表格所有行全部选中
              //   this.$refs.rightTable.toggleAllSelection();
              // });
              // this._rightTerms = this.copyObject(
              //   rightTerms.slice(0, this.size)
              // );
              // this.checkList = terms.slice(0, this.size);
              this.getTermsData(terms);
            } else if (this.routerName == "technologyTopicTrends") { // 判断是否为主题趋势分析
              let terms = []
              let _arr = this.chartData[0].data.terms.slice(0, 50);
              data_node = data_node.concat(_arr);
              data_node = data_node.slice(0, 50);
              data_node.map((it) => {
                terms.push(it.t);
              });
              // this.loading = false;
              this.termsChartData = _arr;
              this._termsChartData = this.copyObject(_arr);
              this.analysisExport();
              this.handleRightData(this._termsChartData);
              this.resultLoading = false;
            } else {
              this.resultLoading = false;
            }
          } else {
            this.resultLoading = false;
          }
        })
        .catch((err) => {
          this.resultLoading = false;
          this.emptyText = "暂无数据";
        });
    },
    handleSelectionChange(val) {
      // console.log("val", val);
      this.checkList = val;
    },
    /**
     * 调用第二次接口 拼接参数
     * {
     * terms: [],
     * co_terms: [],
     * top_n: 50
     * }
     * 获取coterms数据
     * */
    getTermsData(t) {
      // this.loading = true;
      this.termsChartData = [];
      let ths = this;
      let aggs = [
        {
          action: "terms.GetGivenCoTerms",
          parameters: {
            terms: t,
            co_terms: t,
            top_n: t.length,
            topic: this._searchv // "钙钛矿电池" || 
          },
        },
      ];
      
      let sq_time = `year>=${ths.startT} AND year<=${ths.endT}`;
      let sq = ths.searchv + " AND " + sq_time;
      let params = {
        aggs: aggs,
        dbid: "paper",
        eSearch: sq,
        ipi: 1,
        ips: 0,
      };

      
      this.$post(ths.apiName, params)
        .then((res) => {
          let chartData = res.data.chartData;
          // this.loading = false;
          this.termsChartData = chartData;
          this._termsChartData = this.copyObject(chartData);
          this.handleRightData(chartData);
          this.resultLoading = false;
        })
        .catch((err) => {
          this.resultLoading = false;
          // this.loading = false;
          this.emptyText = "暂无数据";
        });
    },
    copyObject(obj) {
      return JSON.parse(JSON.stringify(obj));
    },
    focusBlur(status) {
      this.autosize = status;
    },
    // 合并
    handleMerge() {
      let res = [];
      this.rightTerms.map((term) => {
        if (term.check) {
          res.push(term.key);
        }
      });
      if (res.length > 1) {
        if (this.mergeMap[res[0]]) {
          res.forEach((v, i) => {
            if (i > 0) {
              this.mergeMap[res[0]].push(v)
            }
          })
          // console.log(66, this.mergeMap)
          // 处理嵌套合并
          let keys = Object.keys(this.mergeMap)
          let values = Object.values(this.mergeMap)
          // 去掉重复项
          // keys.forEach(v => {
          //   v = Array.from(new Set(v))
          // })
          if (keys.length > 1) { // 当数组只有一个length时不进行合并嵌套项操作
            // console.log(77, values)
            values.forEach((v, i1) => {
              if (v.length > 0) {
                v.forEach((b, i2) => {
                  let ind = keys.findIndex((n, i3) => i1 !== i3 && n === b) // i1和i3相同时，代表自己本项，需要略过
                  if (ind > -1) {
                    // 合并嵌套项
                    let arr = JSON.parse(JSON.stringify(this.mergeMap[keys[ind]]))
                    // console.log(arr)
                    this.mergeMap[keys[i1]].push(...arr)
                    this.mergeMap[keys[i1]] = Array.from(new Set(this.mergeMap[keys[i1]]))
                    // 置空，用于后续merge过滤操作
                    this.mergeMap[keys[ind]] = []
                  }
                })
              }
            })
          }
          
        } else {
          this.mergeMap[res[0]] = res
        }
        console.log(888, this.mergeMap)
      }
      // 
      // let merge_map = {}
      // merge_map[res[0]] = res
      // let ths = this
      // let sq_time = `year>=${ths.startT} AND year<=${ths.endT}`;
      // let sq = ths.searchv + " AND " + sq_time;
      // let aggs = [
      //   {
      //     action: "terms.SaveKeyword",
      //     parameters: {
      //       merge_map: {
      //         ...merge_map
      //       },
      //       keyword: "钙钛矿电池" || this._searchv
      //     },
      //   },
      // ];
      // let params = {
      //   aggs: aggs,
      //   dbid: "paper",
      //   eSearch: sq,
      //   ipi: 1,
      //   ips: 0,
      // };
      // this.$post(this.$Url.search.commonSearch, params)
      //   .then((res) => {
      //     if (res.status == 200) {
      //       this.getData();
      //     }
      //   })
      // return
      // console.log(222, this.rightTerms, this._termsChartData)
      if (res.length > 1) {
        // console.log("res", res);
        let indexList = [];
        if (this.routerName == "technologyFrontier") { // 判断是否为交叉分析
          res.forEach((r) => {
            this._termsChartData.map((data, index) => {
              if (data.key == r) {
                indexList.push(index);
              }
            });
          });
          this._termsChartData[indexList[0]].co.forEach((co) => {
            for (let i = 1; i < indexList.length; i++) {
              this._termsChartData[indexList[i]].co.forEach((mergeco) => {
                if (co.t == mergeco.t) {
                  co.n += mergeco.n;
                }
              });
            }
          });
          
          for (let i = 1; i < res.length; i++) {
            let ind = this._termsChartData.findIndex(b => b.key === res[i])
            if (ind > -1) {
              this._termsChartData.splice(ind, 1);
            }
          }
        } else if (this.routerName == "technologyTopicTrends") { // 判断是否为主题趋势分析
          res.forEach((r) => {
            this._termsChartData.map((data, index) => {
              if (data.t == r) {
                indexList.push(index);
              }
            });
          });
          this._termsChartData[indexList[0]].year.forEach((co) => {
            for (let i = 1; i < indexList.length; i++) {
              this._termsChartData[indexList[i]].year.forEach((mergeco) => {
                if (co.y == mergeco.y) {
                  co.d += mergeco.d;
                }
              });
            }
          });
          for (let i = 1; i < res.length; i++) {
            let ind = this._termsChartData.findIndex(b => b.t === res[i])
            if (ind > -1) {
              this._termsChartData.splice(ind, 1);
            }
          }
        }
        
        // console.log(66, indexList, this._termsChartData)
        this.termsChartData = this.copyObject(this._termsChartData);
        this.handleRightData(this._termsChartData);
      } else {
        this.$message({
          type: "warning",
          message: "请至少选择两个关键词！",
        });
      }
    },
    // 保存
    handleSave() {
      let keys = Object.keys(this.mergeMap)
      let values = Object.values(this.mergeMap)
      if (keys.length <= 0) {
        this.$message({
          type: "warning",
          message: "请进行编辑或合并操作后再次重试"
        })
        return
      }
      this.$confirm("是否保存当前合并操作", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 
        let merge_map = {}
        values.forEach((v, i) => {
          if (v.length > 0) {
            merge_map[keys[i]] = v
          }
        })
        // console.log(799, merge_map)
        let ths = this
        let sq_time = `year>=${ths.startT} AND year<=${ths.endT}`;
        let sq = ths.searchv + " AND " + sq_time;
        let username = JSON.parse(localStorage.getItem("homeUserInfo")).username;
        let aggs = [
          {
            action: "trendme.SaveKeyword",
            parameters: {
              merge_map: {
                ...merge_map
              },
              keyword: this._searchv, // "钙钛矿电池" || 
              type: username === "qtroot" ? 2 : 1
            },
          },
        ];
        let params = {
          aggs: aggs,
          dbid: "paper",
          eSearch: sq,
          ipi: 1,
          ips: 0,
        };
        this.$post(this.$Url.search.commonSearch, params)
          .then((res) => {
            if (res.status == 200) {
              this.mergeMap = {}
              this.rightTerms = []
              this.getData();
            }
          })
      });
    },
    // 重置
    handleReset() {
      this.$confirm("是否重置操作", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let ths = this
        let sq_time = `year>=${ths.startT} AND year<=${ths.endT}`;
        let sq = ths.searchv + " AND " + sq_time;
        let aggs = [
          {
            action: "trendme.SaveKeyword",
            parameters: {
              merge_map: {},
              keyword: this._searchv // "钙钛矿电池" || 
            },
          },
        ];
        let params = {
          aggs: aggs,
          dbid: "paper",
          eSearch: sq,
          ipi: 1,
          ips: 0,
        };
        this.$post(this.$Url.search.commonSearch, params)
          .then((res) => {
            if (res.status == 200) {
              this.mergeMap = {}
              this.rightTerms = []
              this.getData();
            }
          })
      });
    },
    handleRightData(chartData) {
      let rightTerms = [];
      let inputRefs = []
      if (this.routerName == "technologyFrontier") { // 判断是否为交叉分析
        chartData.map((data) => {
          rightTerms.push({
            key: data.key,
            check: false,
          });
          inputRefs.push(false)
        });
      } else if (this.routerName == "technologyTopicTrends") { // 判断是否为主题趋势分析
        chartData.map((data, i) => {
          rightTerms.push({
            key: data.t,
            check: false,
          });
          inputRefs.push(false)
        });
      }
      this.rightTerms = this.copyObject(rightTerms);
      this.inputRefs = this.copyObject(inputRefs);
      this.$nextTick(function() {
        for (let i = 0; i < this.rightTerms.length; i++) {
          if (i < this.size) {
            this.$refs.rightTable.toggleRowSelection(this.rightTerms[i], true);
          } else {
            break;
          }
        }
      });
    },
    // 修改表格文字内容
    handleUpdateIte(index) {
      if (!this.checkList[index]) {
        this.$message({
          type: "warning",
          message: "请勾选后再进行修改",
        });
        return;
      }
      // 重新设置chartData数据
      let tObj = JSON.parse(JSON.stringify(this._termsChartData.find((v, i) => i == index)))
      let key = tObj.key || tObj.t // 上次的旧key
      let _key = this.rightTerms[index]["key"] // 当前的新key
      console.log('_key', _key)
      // console.log(888, this.termsChartData)
      this._termsChartData.forEach((v, i) => {
        if (i == index) {
          v.key = _key
          v.term = _key
        }
        if (v.co) {
          v.co.forEach(b => {
            if (b.t === key) {
              b.t = _key
            }
          })
        }
      })
      if (this.mergeMap[_key]) {
        this.mergeMap[_key] = [_key, key, ...this.mergeMap[_key]]
        this.mergeMap[_key] = Array.from(new Set(this.mergeMap[_key]))
      } else {
        this.mergeMap[_key] = [_key, key]
      }
      // 处理嵌套合并
      let keys = Object.keys(this.mergeMap)
      let values = Object.values(this.mergeMap)
      // 去掉重复项
      // keys.forEach(v => {
      //   v = Array.from(new Set(v))
      // })
      if (keys.length > 1) { // 当数组只有一个length时不进行合并嵌套项操作
        // console.log('handleUpdateIte', 77, values)
        values.forEach((v, i1) => {
          if (v.length > 0) {
            v.forEach((b, i2) => {
              let ind = keys.findIndex((n, i3) => i1 !== i3 && n === b) // i1和i3相同时，代表自己本项，需要略过
              if (ind > -1) {
                // 合并嵌套项
                let arr = JSON.parse(JSON.stringify(this.mergeMap[keys[ind]]))
                // console.log(arr)
                this.mergeMap[keys[i1]].push(...arr)
                this.mergeMap[keys[i1]] = Array.from(new Set(this.mergeMap[keys[i1]]))
                // 置空，用于后续merge过滤操作
                this.mergeMap[keys[ind]] = []
              }
            })
          }
        })
      }
      // console.log(999, this.mergeMap)
      this.termsChartData = this.copyObject(this._termsChartData)
      this.handleShowInp(index);
    },
    // 显隐修改表格文字input框
    handleShowInp(index) {
      if (!this.checkList[index]) {
        this.$message({
          type: "warning",
          message: "请选勾选后再进行修改",
        });
        return;
      }
      if (this.inputRefs[index] === true) {
        this.$set(this.inputRefs, index, false);
      } else {
        this.$set(this.inputRefs, index, true);
      }
    },
    // 时间控制器
    disabledDate(time, d, type) {
      let md = moment(d);
      if (type === "gt") {
        if (time > md._d) {
          return true;
        }
        return false;
      } else if (type === "lt") {
        if (time < md._d) {
          return true;
        }
        return false;
      }
    },
    changeStart(val) {
      this.startT = moment(val).format("YYYY");
      this.getData();
    },
    changeEnd(val) {
      this.endT = moment(val).format("YYYY");
      this.getData();
    },
    exportData() {
      switch (this.routerName) {
        case "technologyFrontier":
          break;
        case "technologyTopicTrends":
          this.$refs.resTechnologyTopicTrends.exportData();
          break;
        case "technologyMaturity":
          this.$refs.refMaturity.exportData();
          break;
        default:
          break;
      }
    },
    //弹出专家干预
    expertsScope() {
      this.dialogVisible = true;
    },
    confirmExport() {
      this.dialogVisible = false;
      //1、更新本地图表
      this.$refs.refMaturity.expert(this.form);
      //2、调用接口保存专家干预
      //概念期=0.05、原型期=0.25、应用期=0.7、成熟期=0.95
      var sim = 0;
      switch (this.form.name) {
        case "1":
          sim = 0.05;
          break;
        case "2":
          sim = 0.25;
          break;
        case "3":
          sim = 0.7;
          break;
        case "4":
          sim = 0.95;
          break;
        default:
      }
      let realName = JSON.parse(localStorage.getItem("homeUserInfo")).realName;
      this.$post(this.$Url.search.saveExportScoring, {
        creator: realName,
        notes: this.form.notes,
        tech_maturity: [
          {
            year: new Date().getFullYear(),
            sim: sim,
            ori: "N/A",
          },
        ],
        tech_zh: this.searchv,
        tech_en: this.searchv,
        temp: true,
      }).then((res) => {
        console.log("保存专家干预技术成熟度", res);
      });
    },
    chartDom(dom) {
      this.dom = dom;
      this.analysisExport();
    },
    downloadImg() {
      if (this.routerName == "technologyFrontier") {
        downloadChartImg(this.dom);
      } else {
        const technologyTopicTrends = document.getElementById(
          "technologyTopicTrends"
        );
        const idMaturity = document.getElementById("idMaturity");
        let idDom =
          this.routerName == "technologyMaturity"
            ? idMaturity
            : technologyTopicTrends;
        htmlToImage.toPng(idDom).then(function(dataurl) {
          var link = document.createElement("a");
          link.download = "image.png";
          link.href = dataurl;
          link.click();
        });
      }
    },
    querySearchAsync(queryString, cb) {
      this.$post(this.$Url.search.wordsRecommend, {
        query: queryString,
      }).then((res) => {
        let arr = res.data.items;
        let results = [];
        arr.map((item) => {
          results.push({
            value: item,
          });
        });
        results = queryString
          ? results.filter(this.createFilter(queryString))
          : results;
        // 控制展示条数，防止数据太大加载时间过长，影响体验
        if (results.length > 100) {
          results.splice(100, results.length - 1);
        }
        cb(results);
      });
    },
    // 调用match方法，是模糊匹配；官方调用的是indexOf，是精确匹配，看自身情况选择
    createFilter(queryString) {
      return (item) => {
        return item.value.toUpperCase().match(queryString.toUpperCase());
      };
    },
    handleSelect(item) {
      this.searchv = item.value;
      this.getData();
    },
  },
  beforeDestroy() {
    this.$Bus.$off("dcData");
  },
};
</script>
<style lang="scss">
.dialokgClass{
  .el-button--primary {
    color: #FFF !important;
    background-color: $mainColor !important;
    border-color: $mainColor !important;
}
}
</style>
<style lang="scss" scoped>
#idMaturity,
#idFrontier,
#technologyTopicTrends {
  background: #fff;
}
// .el-button--primary {
//     color: #FFF !important;
//     background-color: $mainColor !important;
//     border-color: $mainColor !important;
// }
.el-button--primary:active,.el-button--primary:focus,.el-button--primary:hover{
  color: #FFF !important;
    background-color: $mainColor !important;
    border-color: $mainColor !important;
}
// .el-button:focus, .el-button:hover {
//     color: $mainColor;
//     border-color: $mainColor;
//     background-color: $hoverColor;
// }
.otherAnalysis-page {
  width: 100%;
  .other-search-box {
    width: 100%;
    min-height: 2.7rem;
    padding-bottom: 0.05rem;
    box-sizing: border-box;
    background-color: $color45;
    .osb-tit {
      margin: 0 auto;
      padding-top: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: baseline;
      color: #fff;
      .p-1 {
        font-size: 0.36rem;
      }
      .p-2 {
        font-size: 0.2rem;
      }
    }
    .osb-input {
      width: 12rem;
      height: 0.5rem;
      margin: 0.2rem auto;
      position: relative;
      overflow: hidden;
      .searchc {
        margin: 0 30px;
      }
      .inp {
        width: 11rem;
        height: 0.5rem;
        display: block;
        border-radius: 4px;
        input {
          display: block;
          height: 0.5rem !important;
        }
      }
      .s-btn {
        border-color: $mainColor;
        background-color: $mainColor;
        // &:hover {
        //   opacity: .8;
        // }
      }
      .search-box {
        position: absolute;
        right: 0.02rem;
        top: 0rem;
        width: 1rem;
        height: 0.5rem;
        line-height: 0.5rem;
        background: $mainColor;
        border-radius: 0 4px 4px 0;
        text-align: center;
        color: #fff;
        cursor: pointer;
      }
    }

    .osb-textarea {
      display: flex;
      width: 12rem;
      margin: 0.2rem auto;
      position: relative;
      align-items: center;
      .search-bar {
        width: calc(100% - 90px);
      }
      .search-btn {
        width: 70px;
        height: 0.5rem;
        margin-left: 20px;
        // border-color: #2f41c8;
        // background-color: #2f41c8;
        border-color: #03b38c ;
    background-color: #03b38c;
        // &:hover {
        //   opacity: .8;
        // }
      }
      .textarea-box {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: calc(100% - 90px);
        .el-textarea {
          ::v-deep {
            .el-textarea__inner {
              min-height: 0.5rem !important;
            }
          }
        }
        .search-tips-box {
          width: 100%;
          max-height: 380px;
          overflow-y: auto;
        }
      }
    }
    .hot-words {
      width: 12rem;
      margin: 0.4rem auto 0.2rem;
      color: #fff;
      display: flex;
      .tit {
        width: 1.1rem;
        height: 0.3rem;
        // margin-right: 0.3rem;
        padding: 0.05rem;
        background: #f2a10a;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.25rem;
        font-size: 0.18rem;
      }
      .hot-ul {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        align-items: center;
        li {
          margin-right: 0.25rem;
          font-size: 0.18rem;
          cursor: pointer;
        }
      }
    }
  }

  .condition {
    display: flex;
    justify-content: space-between;
  }
  .charts-wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    min-height: calc(100vh - 0.7rem - 2.7rem);
    .left-wrap {
      flex: 1;
      padding: 0.3rem 0.5rem;
      &.mr {
        margin-right: 380px;
      }
      .top-wrap {
        display: flex;
        justify-content: space-between;
        .m-tits {
          font-size: 0.18rem;
          margin-right: 0.1rem;
        }
        .m-value {
          font-weight: 500;
          // font-size: 0.26rem;
          color: $mainColor;
        }
      }
      .date-box {
        position: relative;
        // margin-top: 10px;
        .tit {
          display: inline-block;
          // width: 75px;
          margin-right: 10px;
          font-size: 14px;
          color: #2d3a86;
        }
        .search-time {
          display: inline-flex;
          align-items: center;
          margin-right: 0.3rem;
          .elpicker {
            width: 1.5rem;
          }
          .split {
            display: inline-block;
            padding: 0 0.3rem;
            font-size: 0.16rem;
          }
          
        }
      }
    }
    ::v-deep {
      .export-btn {
        color: $mainColor;
    background: $color149;
    border-color: $mainColor;
        &:hover {
          background-color: $mainColor;
          color: #fff;
        }
      }
      .save-btn {
        border-color: $mainColor;
        background-color: $mainColor !important;
      }
    }
    .right-wrap {
      position: absolute;
      top: 0;
      right: 0;
      border-left: 1px solid #9bb2ed;
      width: 380px;
      height: 100%;
      // height: calc(100vh - 0.5rem);
      overflow-y: scroll;
      padding: 0.3rem 0.3rem;

      .rw {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        border-bottom: 1px solid #dfdfdf;
        margin-bottom: 0.2rem;
        .r-tools {
          position: relative;
          display: flex;
          align-items: center;
          .r-btn {
            position: relative;
            margin-left: 10px;
            padding: 5px 10px;
            border-radius: 4px;
            background-color: $mainColor;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
          }
        }
      }
      .r-tit {
        font-size: 0.18rem;
        display: block;
      }
      .ci-con {
        align-items: center;
      }
      :deep {
        .el-input__inner {
          padding: 0 5px;
        }
      }
      .tools-btn {
        font-size: 16px;
        margin-left: 5px;
        cursor: pointer;
      }
    }
  }
}
</style>
<style>
.other-search-box .el-input__inner {
  /* border-radius: 20px 0 0 20px; */
}

.other-search-box .el-input--medium .el-input__inner {
  height: 0.5rem;
}
</style>
